<template>
  <div class="main">
    <div class="new_div">
    <h1 style="text-align: center;padding-top: 10px;">问卷示例</h1>
      <div style="padding: 20px;margin-bottom: 30px">为了给您提供更好的服务，希望您能抽出几分钟时间，
        将您的感受和建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！现在我们就马上开始吧!</div>
    <div class="div_1 select-div">
      <span>1.请选择您喜欢的饮料</span>
      <br/>
      <el-radio-group v-model="radio1">
        <el-radio :label="1">酒水</el-radio><br/>
        <el-radio :label="2">茶水</el-radio><br>
      </el-radio-group>
    </div>
    <div class="div_2 select-div none">
      <span>2.请选择你喜欢的茶水</span>
      <br/>
      <el-radio-group v-model="radio2">
        <el-radio :label="1">红茶</el-radio><br/>
        <el-radio :label="2">绿茶</el-radio><br>
        <el-radio :label="3">其他</el-radio><br/>
      </el-radio-group>
    </div>
    <div class="div_3 select-div none">
      <span>2.请选择你喜欢的酒水</span>
      <br/>
      <el-radio-group v-model="radio3">
        <el-radio :label="1">白酒</el-radio><br/>
        <el-radio :label="2">啤酒</el-radio><br>
        <el-radio :label="3">红酒</el-radio><br/>
      </el-radio-group>
    </div>
      <div class="div_5 select-div none">
        <span>2.请您填写喜欢的茶水（可多个）</span>
        <br/>
        <el-input
          type="textarea"
          :rows="1"
          style="width: 96%"
        >
        </el-input>

      </div>
      <el-button type="primary" style="width: 90px;height:50px;margin-left: 40%;" @click="returnCreate">返回创建</el-button>
      <el-button type="primary" style="width: 90px;height:50px;margin-left: 5%;">发布问卷</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        radio1: '',
        radio2: '',
        radio3: '',
        radio4: ''
      }
    },
    methods:{
      returnCreate () {
        this.$router.push('/createQuestion')
      }
    },
    updated () {
      const div2 = document.getElementsByClassName('div_2')
      const div3 = document.getElementsByClassName('div_3')
      const div5 = document.getElementsByClassName('div_5')
      if (this.radio1 === 1) {
        div2[0].style.display = 'none'
        div3[0].style.display = 'block'
      } else {
        div3[0].style.display = 'none'
        div2[0].style.display = 'block'
      }
      if (this.radio2 === 3 && this.radio1 === 2) {
        div5[0].style.display = 'block'
      } else {
        div5[0].style.display = 'none'
      }
    }
  }
</script>
<style scoped>
*{
  padding: 0px;
  margin: 0px;
}
.main{
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-image: url("./2.png");
}
  .new_div {
    position: relative;
    top: 10px;
    left: 2%;
    width: 50%;
    height: 97%;
    margin-left: 25%;
    background-color: #fff;
  }
  .none{
    display: none;
  }
  .show {
    display: block;
  }
  div{
    line-height: 60px;
  }
  .select-div{
    padding-left: 30px;
    font-size: 15px!important;
  }
</style>
